<template>
	<view class="login">
		<view class="user">
			<view class="user-img">
				<image src="../../static/login/user.jpg" mode=""></image>
			</view>
			<p>U.amazing</p>
		</view>
		<view class="main">
			<view class="input">
				<view class="input-row">
					<p class="input-row-title" :class="{'input-row-title-focus':accountfocus}">账号</p>
					<input @focus="focus(0)" @blur="blur()" v-model="account" type="text"/>
					<view class="line" :class="{'line-focus':(Linefocus==0)}"></view>
				</view>
				<view class="input-row">
					<p class="input-row-title" :class="{'input-row-title-focus':passwordfocus}">密码</p>
					<input @focus="focus(1)" @blur="blur()" v-model="password" type="password"/>
					<view class="line" :class="{'line-focus':(Linefocus==1)}"></view>
				</view>
				<view class="btn">
					<button @click="login()" class="btn-login" type="primary" >登录</button>
				</view>
			</view>
			<view class="notice">
				<p>没有账号？</p><a>注册</a>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accountfocus: false,
				passwordfocus: false,
				Linefocus: -1,
				account: '',
				password: '',
			};
		},
		methods:{
			login(){
				uni.request({
					url: this.$url+'login',
					method:"POST",
					data:{
						email: this.account,
						password: this.password
					},
					success: (res) => {
						uni.navigateTo({
							url:"../home/home",
							animationType:"pop-in"
						})
						uni.setStorage({
						key: "user",
						data: res.data
						})
					}
				})
			},
			focus(id){
				this.Linefocus=id
				if(id==0){
					this.accountfocus=true
				}
				if(id==1){
					this.passwordfocus=true

				}
			},
			blur(){
				this.Linefocus = -1
				if(this.account==''){
					this.accountfocus=false
				}
				if(this.password==''){
					this.passwordfocus=false
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
.page{

}
.login{
	display flex
	flex-direction column
	padding-top 15vh
	padding-bottom 1vh
	height 100vh
	box-sizing border-box
	background-image url('')
	background-size 100% 100%
	background-repeat no-repeat
	.user{
		&-img{
			display block
			margin 0 auto
			width 100px
			height 100px
			border-radius 50%
			padding 2px;
			background-color #333333
			box-shadow 0 0 10px rgba(255,255,255,0.2)
			image{
				width 100%
				height 100%
				border-radius 50%
			}
		}

		p{
			text-align center
			color white
			line-height 35px
			&:nth-of-type(1){
				margin-top 10px
				font-size 24px
			}
			&:nth-of-type(2){
				font-size 18px
			}
		}
	}
	.main{
		margin 0 auto;
		margin-top 40px
		width 80%;
		.input{
			padding 10px 0
			color white;
			border-radius 5px
			input{
				height 30px
				font-size 16px
				border-bottom 1px solid white
			}
			&-row{
				position relative
				margin-bottom 30px
				width 100%
				padding 0 20px
				box-sizing border-box
				&-title{
					position absolute
					top 7px
					left 25px
					font-size 16px
					font-weight 300
					transition all .5s
					&-focus{
						transform translate(-5px,-25px) scale(0.8)
					}
				}
				.line{
					position absolute
					left 50%
					bottom 0
					width 0
					height 1px
					background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
					transition all .5s
					&-focus{
						left 20px
						width calc(100% - 40px)
					}
				}
				&:last-child{
					margin-bottom 0
				}
			}
			.btn{
				&-login{
					margin-top 5vh
					width 88%
					background-image: linear-gradient(to right, #b721ff 0%, #21d4fd 100%);
					filter brightness(1.2)
					transition all .5s
				}
			}
		}
		.notice{
			margin-top 20px
			display flex;
			justify-content center;
			p{
				text-align center
				font-size 15px
				color white
			}
			a{
				font-size 15px
				color white;
			}
		}
	}
}
</style>
